<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <meta name="description" content="Draw a cylinder or cone.">
    <meta name="cesium-sandcastle-labels" content="Development">
    <title>Cesium Demo</title>
    <script type="text/javascript" src="../Sandcastle-header.js"></script>
    <script type="text/javascript" src="../../../ThirdParty/requirejs-2.1.20/require.js"></script>
    <script type="text/javascript">
        if (typeof require === "function") {
            require.config({
                baseUrl: '../../../Source',
                waitSeconds: 120
            });
        }

    </script>
</head>

<body class="sandcastle-loading" data-sandcastle-bucket="bucket-requirejs.html">
    <style>
        @import url(../templates/bucket.css);

    </style>
    <div id="cesiumContainer" class="fullSize"></div>
    <div id="loadingOverlay">
        <h1>Loading...</h1>
    </div>
    <div id="toolbar"></div>
    <script id="cesium_sandcastle_script">
        function startup(Cesium) {
            'use strict';
            //Sandcastle_Begin
            // Create the viewer.
            var viewer = new Cesium.Viewer('cesiumContainer', {
                imageryProvider: Cesium.createTileMapServiceImageryProvider({
                    url: Cesium.buildModuleUrl('Assets/Textures/NaturalEarthII')
                }),
            });
            var scene = viewer.scene;

            // 1 雷达位置计算
            // 1.1 雷达的高度
            var length = 400000.0;
            // 1.2 地面位置(垂直地面)
            var positionOnEllipsoid = Cesium.Cartesian3.fromDegrees(116.39, 39.9);
            // 1.3 中心位置
            var centerOnEllipsoid = Cesium.Cartesian3.fromDegrees(116.39, 39.9, length*0.5);
            // 1.4 顶部位置(卫星位置)
            var topOnEllipsoid = Cesium.Cartesian3.fromDegrees(116.39, 39.9, length);
            // 1.5 矩阵计算
            var modelMatrix = Cesium.Matrix4.multiplyByTranslation(
                Cesium.Transforms.eastNorthUpToFixedFrame(positionOnEllipsoid),
                new Cesium.Cartesian3(0.0, 0.0, length * 0.5), new Cesium.Matrix4()
            );

            // 2 相机飞入特定位置
            viewer.camera.flyToBoundingSphere(new Cesium.BoundingSphere(centerOnEllipsoid, length));

            // 3 创建卫星
            var imageUri = ''
            var billboards = scene.primitives.add(new Cesium.BillboardCollection());
            billboards.add({
                // image : './Tutorials/satellite1.svg',
                image : imageUri,
                position : topOnEllipsoid,
                horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
                verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
                pixelOffset: new Cesium.Cartesian2(-10, 10),
                scale: 0.3,
            });

            // 4 创建雷达放射波
            // 4.1 先创建Geometry
            var cylinderGeometry = new Cesium.CylinderGeometry({
                length: length,
                topRadius: 0.0,
                bottomRadius: length * 0.5,
                // vertexFormat : Cesium.PerInstanceColorAppearance.VERTEX_FORMAT
                vertexFormat: Cesium.MaterialAppearance.MaterialSupport.TEXTURED.vertexFormat
            });
            // 4.2 创建GeometryInstance
            var redCone = new Cesium.GeometryInstance({
                geometry: cylinderGeometry,
                modelMatrix: modelMatrix,
                // attributes : {
                //     color : Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.RED)
                // }
            });
            // 4.3 创建Primitive
            var radar = scene.primitives.add(new Cesium.Primitive({
                geometryInstances: [redCone],
                // appearance : new Cesium.PerInstanceColorAppearance({
                //     closed : true,
                //     translucent: false
                // })
                appearance: new Cesium.MaterialAppearance({
                    // 贴图像纹理
                    // material: Cesium.Material.fromType('Image', {
                    //     image: '../../SampleData/models/CesiumBalloon/CesiumBalloonPrint_singleDot.png'
                    // }),

                    // 贴棋盘纹理
                    // material: Cesium.Material.fromType('Checkerboard'),

                    // 自定义纹理
                    material: new Cesium.Material({
                        fabric: {
                            type: 'VtxfShader1',
                            uniforms: {
                                color: new Cesium.Color(0.2, 1.0, 0.0, 1.0),
                                repeat: 30.0,
                                offset: 0.0,
                                thickness: 0.3,
                            },
                            source: `
                                uniform vec4 color;
                                uniform float repeat;
                                uniform float offset;
                                uniform float thickness;

                                czm_material czm_getMaterial(czm_materialInput materialInput)
                                {
                                    czm_material material = czm_getDefaultMaterial(materialInput);
                                    float sp = 1.0/repeat;
                                    vec2 st = materialInput.st;
                                    float dis = distance(st, vec2(0.5));
                                    float m = mod(dis + offset, sp);
                                    float a = step(sp*(1.0-thickness), m);

                                    material.diffuse = color.rgb;
                                    material.alpha = a * color.a;

                                    return material;
                                }
                            `
                        },
                        translucent: false
                    }),
                    faceForward : false, // 当绘制的三角面片法向不能朝向视点时，自动翻转法向，从而避免法向计算后发黑等问题
                    closed: true // 是否为封闭体，实际上执行的是是否进行背面裁剪
                }),
            }));

            // 5 动态修改雷达材质中的offset变量，从而实现动态效果。
            viewer.scene.preUpdate.addEventListener(function() {
                var offset = radar.appearance.material.uniforms.offset;
                offset -= 0.001;
                if (offset > 1.0) {
                    offset = 0.0;
                }
                radar.appearance.material.uniforms.offset = offset;
            })

            //Sandcastle_End
            Sandcastle.finishedLoading();
        }
        if (typeof Cesium !== "undefined") {
            startup(Cesium);
        } else if (typeof require === "function") {
            require(["Cesium"], startup);
        }

    </script>
</body>

</html>
